<template>
  <PipePathProps
    v-model:isFloating="isFloating"
    v-model:isReverse="isReverse"
    v-model:pipePathStyle="pipePathStyle"
    v-model:speed="speed"
    :type="type"
  />
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
import PipePathProps from "../AttrPanel/PipePathProps.vue";
import type { PipePathOriginalProps, SetPropsExpose } from "./types";
import type { ConfigurationInstance, PipePathJSON } from "/@/components/types";

const props = defineProps<{
  compInstance: ConfigurationInstance<PipePathJSON, PipePathOriginalProps>;
}>();

const originalProps = props.compInstance.getOriginalProps();
const isFloating = ref(originalProps.isFloating);
const isReverse = ref(originalProps.isReverse);
const pipePathStyle = ref(originalProps.pipePathStyle);
const type = ref(originalProps.type);
const speed = ref(originalProps.speed);

watch([isFloating, isReverse, speed], (values) => {
  props.compInstance.previewCondition({
    isFloating: values[0],
    isReverse: values[1],
    speed: values[2],
  });
});
watch(pipePathStyle, (v) => {
  props.compInstance.previewCondition({
    pipePathStyle: v,
  });
});

const myExpose: SetPropsExpose = {
  clear() {},
  setCondition(condition) {
    condition.pipePathStyle && (pipePathStyle.value = condition.pipePathStyle);
    condition.isFloating !== undefined && (isFloating.value = condition.isFloating);
    condition.isReverse !== undefined && (isReverse.value = condition.isReverse);
    condition.speed !== undefined && (speed.value = condition.speed);
  },
  getSetResult() {
    return {
      isReverse: isReverse.value,
      isFloating: isFloating.value,
      pipePathStyle: pipePathStyle.value,
      speed: speed.value,
    };
  },
};
defineExpose(myExpose);
</script>
